<template>
	<div id="goodList">
		<!-- 商品列表 -->
		<!-- 通知管理哈哈哈哈 -->
		<el-row class="role-head">
			<el-input placeholder="请输入商品ID" v-model="goodsId"></el-input>
			<el-input placeholder="请输入商品编号" v-model="goodsSn"></el-input>
			<el-input placeholder="请输入商品名称" v-model="name"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="searchPro">查询</el-button>
			<el-button type="primary" icon="el-icon-edit" @click="addPro">添加</el-button>
			<el-button type="primary" icon="el-icon-bottom" @click="downLoadExsl">导出</el-button>
		</el-row>
		<template>
			<template>
				<el-table :data="tableData" style="width: 100%" :border="true":header-cell-style="{textAlign:'center'}":cell-style="{textAlign:'center'}"
				id="tb"
				>
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="商品编号">
									<span>{{ props.row.goodsSn }}</span>
								</el-form-item>
								<el-form-item label="宣传画廊">
									<!-- <span>{{ props.row.shop }}</span> -->
									<template v-for="item in props.row.gallery">
										<img :src="item" class="pic2">
									</template>
								</el-form-item>
								<el-form-item label="商品介绍">
									<span>{{ props.row.brief}}</span>
								</el-form-item>
								<el-form-item label="商品单位">
									<span>{{ props.row.unit }}</span>
								</el-form-item>
								<el-form-item label="关键字">
									<span>{{ props.row.keywords }}</span>
								</el-form-item>
								<el-form-item label="类目ID">
									<span>{{ props.row.categoryId }}</span>
								</el-form-item>
								<el-form-item label="品牌商ID">
									<span>{{ props.row.brandId }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="id" label="商品ID">
					</el-table-column>
					<el-table-column prop="name" label="名称">
					</el-table-column>
					<el-table-column  label="图片">
						<template slot-scope="slot">
							<img  :src="slot.row.picUrl" class="pic"/>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="分享图">
					</el-table-column>
					<el-table-column label="详情">
						<template slot-scope="slot">
							<el-button type="primary" @click="readNotice(slot.row)">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="counterPrice" label="市场售价">
					
					</el-table-column>
					<el-table-column prop="retailPrice" label="当前价格">
					</el-table-column>
					<el-table-column label="是否新品">
						<template slot-scope="slot">
							<el-tag type="success" v-if="slot.row.isNew">
								新品
							</el-tag>
							<el-tag type="warning" v-else>非新品</el-tag>
						</template>
					</el-table-column>
					<el-table-column  label="是否热品">
						<template slot-scope="slot">
							<el-tag type="success" v-if="slot.row.isHot">
								热品
							</el-tag>
							<el-tag type="warning" v-else>非热品</el-tag>
						</template>
					</el-table-column>
					<el-table-column  label="是否在售">
						<template slot-scope="slot">
							<el-tag type="success" v-if="slot.row.isOnSale">
								在售
							</el-tag>
							<el-tag type="warning" v-else>非在售</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

		</template>
		<!-- 查看通知 -->
		<template>
			<el-dialog title="通知" :visible.sync="dialogVisible" width="45%" id="dg">
				<div v-html="noticeContent">
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</template>
		<!-- 这里是分页功能 -->
		<template>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</template>

	</div>
</template>

<script>
	import {allGoods} from '../../https/good'
	export default {
		data() {
			return {
				// 商品ID
				goodsId: '',
				// 商品编号
				goodsSn: '',
				// 商品的名字
				name: '',
				//表格数据
				tableData: [],
				// 查看通知的弹框
				dialogVisible:false,
				// 要展示的内容
				noticeContent:'',
				// 当前页数
				page:1,
				// 每页显示条数
				limit:10,
				// 总条数
				total:0
				



			}
		},
		methods: {
			searchPro() {
				// 搜索商品
				this.allPro()
			},
			addPro() {
				// 添加商品
			},
			downLoadExsl() {
				// 导出excel
			},
			handleEdit(row){
				// 编辑操作
				
			},
			handleDelete(row){
				// 删除操作
			},
			handleSizeChange(val) {
				// 分页改变显示数据
				// console.log(`每页 ${val} 条`);
				this.limit = val
				this.allPro()
			},
			handleCurrentChange(val) {
				// 当前页码的数据
				// console.log(`当前页: ${val}`);
				this.page = val
				this.allPro()
			},

			readNotice(row){
				// 查看通知
				this.dialogVisible=true
				this.noticeContent=row.detail
				
			},
			allPro(){
				// 所有的商品列表
				let params={
					page:this.page,
					limit:this.limit,
					goodsId:this.goodsId,
					goodsSn:this.goodsSn,
					name:this.name,
				}
				allGoods(params).then(res=>{
					console.log("所有的商品的列表",res)
					this.tableData=res.data.data.list
					this.total=res.data.data.total
					
				}).catch(err=>{
					console.log("商品列表报错",err)
				})
			},

		},
		mounted() {
			// 挂载之后
			this.allPro()
		}
	}
</script>

<style>
	.role-head {
		margin-bottom: 15px;
		min-width: 500px;
		overflow: hidden;
	}

	.role-head .el-input {
		width: 150px !important;
		margin-right: 10px;
	}
	.block{
		margin-top: 20px;
	}
	.pic{
		width: 40px;
		height: 40px;
	}
	#tb .el-button{
		padding: 8px 16px;
	}
	 .demo-table-expand {
	    font-size: 0;
	  }
	  .demo-table-expand label {
	    width: 90px;
	    color: #99a9bf;
	  }
	  .demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 100%;
	  }
		.pic2{
			width: 100px;
			height: 100px;
		}
</style>
